<template>
    <div class="card-item  flexAlginItems displayFlex"
         :class="{'coupon-disabled': cardItemMsg.state == 3 || cardItemMsg.state == 6 || cardItemMsg.state == 5 || cardItemMsg.state == 7 || cardItemMsg.state == 8 }" >
        <!--<span class="coupons1_0-wshop-img flexCenter">-->
            <!--<img class="coupons1_0-shop-img" src="../../../assets/images/booking_close_button.png" alt="">-->
        <!--</span>-->
        <!--<div class="coupons1_0-link-detail flexCenter">-->
            <!--<div class="coupons1_0-wuse-msg flexAlginItems">-->
                <!--<div class="coupons1_0-use-msg">-->
                    <!--<div class="coupons1_0-money">2222</div>-->
                    <!--<div class="coupons1_0-date">222-3333</div>-->
                <!--</div>-->
            <!--</div>-->
            <!--<div class="coupons1_0-use-wcondition flexAlginItems">-->
                <!--<div >-->
                    <!--<div class="coupons1_0-reduce"><span style="font-size:.11rem;padding-right: .05rem;">减</span>2222元</div>-->
                    <!--<div class="coupons1_0-condition">2222</div>-->
                <!--</div>-->
            <!--</div>-->
        <!--</div>-->
        <img v-if="cardItemMsg.state == 6 || cardItemMsg.state == 7 || cardItemMsg.state == 8" class="coupon-mark-img" :src="staticImageUrl('/images/coupon_already_get.png')" alt="">
        <img v-else-if="cardItemMsg.state == 5" class="coupon-mark-img" :src="staticImageUrl('/images/coupon_already_no.png')" alt="">
        <img v-else-if="cardItemMsg.state == 3" class="coupon-mark-img" :src="staticImageUrl('/images/coupon_already_pass.png')" alt="">
        <span class="coupons1_0-wshop-img flexCenter">
            <img class="coupons1_0-shop-img" :src="cardItemMsg.storeIcon" alt="">
        </span>
        <div class="coupons1_0-link-detail justifyCtArd displayFlex flex1">
            <div class="coupons1_0-wuse-msg flexCenter">
                <div class="coupons1_0-use-msg">
                    <div class="coupons1_0-money" v-if="cardItemMsg.condition.limitConsume && cardItemMsg.condition.consumePrice > 0">满{{cardItemMsg.condition.consumePrice}}</div>
                    <div class="coupons1_0-money" v-else>任意金额可用</div>
                    <div class="coupons1_0-date">{{changeTimeFormat(cardItemMsg.startTime)}}-{{changeTimeFormat(cardItemMsg.endTime)}}</div>
                </div>
            </div>
            <div class="coupons1_0-use-wcondition flex1 flexCenter">
                <div class="coupons1_0-use-condition" v-if="cardItemMsg.ticketType == 1">
                    <div class="coupons1_0-reduce"><span class="coupons1_0-reduce-content">减</span>{{cardItemMsg.condition.cashPrice}}元
                    </div>
                    <div class="coupons1_0-condition">{{cardItemMsg.scope}}</div>
                </div>
                <!--增值券暂时没有-->
                <div class="coupons1_0-use-condition" v-if="cardItemMsg.ticketType == 2">
                    <div class="coupons1_0-reduce"><span class="coupons1_0-reduce-content">减</span>{{cardItemMsg.condition.cashPrice}}元
                    </div>
                    <div class="coupons1_0-condition">{{cardItemMsg.scope}}</div>
                </div>
                <!--折扣券-->
                <div class="coupons1_0-use-condition" v-else-if="cardItemMsg.ticketType == 3">
                    <div class="coupons1_0-reduce">
                        <span class="coupons1_0-reduce-content">享</span>{{cardItemMsg.condition.discount}}折
                    </div>
                    <div class="coupons1_0-condition">{{cardItemMsg.scope}}</div>
                </div>
                <!--赠品券-->
                <div class="coupons1_0-use-condition" v-else-if="cardItemMsg.ticketType == 4">
                    <div class="coupons1_0-reduce"><span class="coupons1_0-reduce-content">赠</span>{{cardItemMsg.condition.gift.slice(0,7)}}
                    </div>
                    <div class="coupons1_0-condition">{{cardItemMsg.scope}}</div>
                </div>
            </div>
        </div>
        <!--<div class="coupons1_0-wbtn displayFlex flexCenter">-->
            <!--<span>立即领取</span>-->
        <!--</div>-->
    </div>

</template>

<script>
    export default {
        name: "CartItem",
        props:{
            cardItemMsgProps:{
                type:Object
            }
        },
        data(){
            return{
                cardItemMsg:{
                    promotionId:0,//推广id
                    storeIcon:'',//头像
                    templateId:0,//
                    state:0,//劵状态-2已作废 -1未开启 0正常 1冻结 2已使用 3已到期 4即将过期 5 抢光了 6已领取 7单日领取完了 8 已领取完了
                    scope:'',//使用范围
                    startTime:'',//使用开始时间
                    endTime:'',//使用结束时间
                    ticketType:1,//1 = 代金券 、 2 = 增值券 、 3 = 折扣券 、 4 = 赠品券
                    condition: {
                        // /*增值劵*/
                        // "initialScale": 0.5,      //----初始比例
                        // "max": 200,               //----增值上限
                        // "increment": 10,          //----增量(单次增长)
                        // "dayLimit": 2,             //----次数（人/日）
                        // /*其他劵公共*/
                        // "limitConsume": true,     //----是否限制最低消费
                        // "consumePrice": 100,      //----消费金额
                        // /*代金券*/
                        // "cashPrice": 20,           //----代金金额
                        // /*折扣券*/
                        // "discount": 8.5,           //----折扣
                        // /*赠品劵*/
                        // "gift": "烤羊肉3串",       //----赠品
                    },
                    whichcouponsModel:0,//属于那个swiper模块
                },
            }
        },
        mounted(){
            this.cardItemMsg = Object.assign( {},this.cardItemMsg,this.cardItemMsgProps );
        },
        methods:{
            changeTimeFormat(time){
                if(time.toString().includes('-')){
                    return time.replace(/-/g,'.');
                }else{
                    return this.getTime(time,'MM.dd')
                }
            }
        },
        watch:{
            cardItemMsgProps(val){
                this.cardItemMsg = Object.assign( {},this.cardItemMsg,val );
            }
        }
    }
</script>

<style scoped>
    .card-item{
        background-color: #fff;
        border-radius: 5px;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-bottom: .1rem;
        width: 100%;
    }
    .coupons1_0-wshop-img{
        width: .75rem;
        height: 1rem;
    }
    .coupons1_0-shop-img{
        width: .6rem;
        height: .6rem;
        border-radius: .06rem;
        /*border-radius: 50%;*/
        padding: .02rem;
        border: 1px solid #F0F0F0;
        box-sizing: border-box;
        object-fit: cover;
    }
    .coupons1_0-use-msg{
        width: 100%;
        text-align: center;
    }
    .coupons1_0-money{
        color: #333;
        font-size: .13rem;
        font-weight: bold;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    .coupons1_0-reduce,.coupons1_0-condition,.coupons1_0-date,.coupons1_0-money{
        width: 100%;
        text-align: center;
    }
    .coupons1_0-date,.coupons1_0-condition{
        color: #333333;
        font-size: .12rem;
        padding-top: .07rem;
    }
    .coupons1_0-date{
        font-size: .11rem;
        color: #666;
    }
    .coupons1_0-reduce{
        color: #56B78C;
        font-size: .18rem;
    }
    .coupons1_0-reduce-content{
        font-size:.15rem;
        margin-right: .04rem;
    }
    .coupon-mark-img{
        position: absolute;
        top: 0;
        right: .4rem;
        width: .61rem;
    }
    .coupons1_0-use-condition{
        letter-spacing: .01rem;
        white-space: nowrap;
    }
    .coupons1_0-wuse-msg{
        min-width: 1rem;
        max-width: 1.5rem;
    }
    .coupons1_0-wbtn {
        border-left: dashed 1px #E6E6E6;
        color: #666666;
        width: .4rem;
        padding: 0 .13rem;
    }
    .coupons1_0-link-detail{
        padding-right: .1rem;
    }
    /*.coupons1_0-bottom{*/
    /*width: 100%;*/
    /*background-color: #fff;*/
    /*border-top: 1px solid #f5f5f5;*/
    /*height: .6rem;*/
    /*}*/
    /*.coupons1_0-bottom-left{*/
    /*font-size: .12rem;*/
    /*}*/
    /*.coupons1_0-username{*/
    /*position: relative;*/
    /*display: inline-block;*/
    /*max-width: .6rem;*/
    /*white-space: nowrap;*/
    /*overflow: hidden;*/
    /*text-overflow: ellipsis;*/
    /*vertical-align: middle;*/
    /*width: .65rem;*/
    /*height: .28rem;*/
    /*line-height: .26rem;*/
    /*}*/
    /* .coupons1_0-send{
         position: relative;
         left: -.12rem;
     }*/
    /*.coupons1_0-bottom-right{
        float: right;
        background-color: #fff;
        height: .3rem;
        flex: 1;
        display: flex;
        flex-direction: row-reverse;
        padding-right: .1rem;
        button{
            outline: none;
            border: 1px solid #E1E1E1;
            color: #666666;
            font-size: .13rem;
            width: .6rem;
            height: .28rem;
            background-color: #fff;
            -webkit-border-radius: 2px;
            -moz-border-radius: 2px;
            border-radius: 2px;
            margin-left: .045rem;
        }
    }*/

</style>